<template>
  <el-dialog
    :title="param.id?$t('message.edit') + $t('message.yqpc'):$t('message.add') + $t('message.yqpc')"
    :visible.sync="showReserve"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    width="700px"
    class="dialog-reserve"
  >
    <div v-if="reserveForm && reserveForm.length > 0" class="mb30">
      <el-table
        :data="reserveForm"
        element-loading-text="Loading"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column :label="$t('message.xh')" type="index" align="center" :width="$i18n.locale === 'ZH'? 50 : 120" />
        <el-table-column align="center" :label="$t('message.cdname')" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.siteModelName ? scope.row.siteModelName : scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('message.time')" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.beginTime + " - " + scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('message.feiyon')" prop="price" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.price }} {{ $t('message.yuan') }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-form ref="form" class="doumee-form" :model="param" :rules="rules" label-width="auto" label-suffix="：">
      <div class="property-title">{{ $t('message.hdxx') }}</div>
      <el-form-item :label="$t('message.yqpcmc')" prop="name">
        <el-input v-model="param.name" :placeholder="$t('message.qsr') + $t('message.yqpcmc')" maxlength="50" />
      </el-form-item>
      <el-form-item :label="$t('message.bmf')" prop="price">
        <el-input v-model="param.price" :placeholder="$t('message.qsr') + $t('message.bmf')" maxlength="50" oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" />
      </el-form-item>
      <el-form-item :label="$t('message.rs')" prop="numType">
        <el-radio-group v-model="param.numType">
          <div class="df" style="align-items: center;">
            <el-radio label="0" value="0">{{ $t('message.bx') }}</el-radio>
            <el-radio label="1" value="1">{{ $t('message.zdrs') }}</el-radio>
            <div v-if="param.numType === '1' && $i18n.locale === 'ZH'" class="df">
              <el-input
                v-model="param.numMin"
                type="number"
                class="w120"
                maxlength="50"
                oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                :placeholder="$t('message.rsxzsm')"
              />
              <span class="ml10 mr10">-</span>
              <el-input
                v-model="param.numMax"
                type="number"
                maxlength="50"
                oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                class="w120"
                :placeholder="$t('message.rssx')"
              />
            </div>
          </div>
        </el-radio-group>
        <div v-if="param.numType === '1' && $i18n.locale !== 'ZH'" class="df" style="margin-top: 20px;">
          <el-input
            v-model="param.numMin"
            type="number"
            class="w120"
            maxlength="50"
            oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            :placeholder="$t('message.rsxzsm')"
          />
          <span class="ml10 mr10">-</span>
          <el-input
            v-model="param.numMax"
            type="number"
            maxlength="50"
            oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            class="w120"
            :placeholder="$t('message.rssx')"
          />
        </div>
      </el-form-item>
      <el-form-item :label="$t('message.bmjzsj')" prop="endTime">
        <el-date-picker v-model="param.endTime" style="width: 100%;" align="right" type="datetime" :placeholder="$t('message.xzrq')" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item>
      <el-form-item :label="$t('message.sort')" prop="sortNum">
        <el-input
          v-model="param.sortNum"
          maxlength="11"
          oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 16)"
          :placeholder="$t('message.qsr') + $t('message.sort')"
        />
      </el-form-item>
      <div class="property-title mt30">{{ $t('message.xqxx') }}</div>
      <el-form-item :label="$t('message.xianqing')">
        <el-input v-model="param.description" type="textarea" :placeholder="$t('message.qsr') + $t('message.xianqing')" maxlength="100" />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="showReserve = false">{{ $t('message.qx') }}</el-button>
      <el-button :loading="subLoading" type="primary" @click="clickReserveForm">{{ $t('message.qr') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addJointSite, editJointSite } from '@/api'
import store from '@/store'
export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      showReserve: false,
      reserveForm: [],
      param: {},
      subLoading: false,
      rules: {
        name: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.yqpcmc'), trigger: 'blur' }
        ],
        price: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.bmf'), trigger: 'blur' }
        ],
        numType: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.rslx'), trigger: 'change' }
        ],
        endTime: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.bmjjsj'), trigger: 'change' }
        ],
        description: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.xianqing'), trigger: 'blur' }
        ]
      },
      price: '',
      projectId: '',
      sites: []
    }
  },
  methods: {
    open(detail) {
      if (detail.form) {
        this.reserveForm = []
        this.sites = detail.sites
        this.param = detail.form
      } else {
        this.reserveForm = detail.reserveForm
        this.sites = detail.reserveForm.map(s => s.id)
        this.param = {}
      }
      this.showReserve = true
      this.price = detail.price
      this.projectId = detail.projectId
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    clickReserveForm() {
      const param = { ...this.param }
      const that = this
      this.$refs.form.validate(v => {
        if (v) {
          if (param.numType === '1' || param.numType === 1) {
            if (!param.numMin) {
              return that.$message.info(this.$t('message.qsr') + this.$t('message.hdzxrs'))
            }
            if (!param.numMax) {
              return that.$message.info(this.$t('message.qsr') + this.$t('message.hdzdrs'))
            }
            if (Number(param.numMax) < Number(param.numMin)) {
              return that.$message.info(this.$t('message.hdzdhzx'))
            }
          } else {
            param.numMax = null
            param.numMin = null
          }
          this.subLoading = true
          // param.price = that.price
          param.sites = that.sites
          param.projectId = that.projectId
          if (param.id) {
            editJointSite({ param }).then((res) => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.editcg'))
                that.showReserve = false
                that.$emit('yqSccess')
              }
            }).catch(() => {
              this.subLoading = false
            })
          } else {
            addJointSite({ param }).then((res) => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.tjcg2'))
                that.showReserve = false
                that.$emit('yqSccess')
              }
            }).catch(() => {
              this.subLoading = false
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';

.zbt {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 16px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.skCnt {
  margin-top: -10px;
  display: flex;
  margin-bottom: 20px;
}

.bzbt {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 14px;
  margin-bottom: 15px;
}

.dialog-footer {
  position: relative;

  .reserve-money {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    position: absolute;
    left: 0;

    b {
      color: $SecondColor;
      font-size: 20px;
      margin-right: 4px;
    }
  }
}
</style>
